<template>
  <div class="top10-echart">
    <div class="top10-echart__content" ref="echartRef"></div>
    <div v-if="loading" class="loading">
      <dv-loading>Loading...</dv-loading>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const echartRef = ref()
const props = defineProps({
  labels: {
    type: Array,
    default: () => {
      return []
    }
  },
  data: {
    type: Array,
    default: () => {
      return []
    }
  },
  loading: {
    type: Boolean,
    default: false
  },
  grid: {
    type: Object,
    default: () => {
      return {
        top: '30px',
        bottom: '100px',
        left: '60px',
        right: '20px'
      }
    }
  },
  axisLabel: {
    type: Object,
    default: () => {
      return {}
    }
  },
  barName: {
    type: String,
    default: '库存量'
  },
  barWidth: {
    type: Number,
    default: 12
  }
})

function draw(rows) {
  const defaultAxisLabel = {
    formatter: '{value}',
    textStyle: {
      color: '#FFF'
    },
    fontSize: '12',
    rotate: 45
  }
  let option = {
    // title: {
    //   text: 'ECharts 入门示例'
    // },
    tooltip: {},
    grid: props.grid,
    xAxis: {
      type: 'category',
      splitLine: {
        show: false
      },
      axisTick: {
        // 刻度线
        show: false
      },
      axisLabel: Object.assign(defaultAxisLabel, props.axisLabel),
      data: props.labels._value || props.labels
    },
    yAxis: {
      axisLine: {
        show: true
      },
      splitLine: {
        // 水平线
        show: false
      },
      axisTick: {
        // 刻度线
        show: false
      },
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          color: '#FFF'
        },
        fontSize: '12'
      }
    },
    series: [
      {
        name: props.barName,
        type: 'bar',
        data: props.data._value || props.data,
        barWidth: props.barWidth,
        showBackground: false,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        // 头部显示数量
        label: {
          show: true,
          position: 'top'
        },
        // 柱子颜色
        itemStyle: {
          borderColor: 'transparent',
          color: 'rgb(63, 150, 165)'
        },
        // 鼠标经过时柱子颜色
        emphasis: {
          itemStyle: {
            borderColor: 'transparent',
            color: 'rgb(127, 255, 0)'
          }
        },
        markLine: {
          silent: false
        }
      }
    ]
  }
  if (echartRef.value) {
    let myChart = echarts.init(echartRef.value, 'light', {
      renderer: 'canvas',
      useDirtyRect: false
    })
    myChart.setOption(option)
    setTimeout(myChart.resize, 300)
  }
}

watch(
  () => props.labels,
  (n) => {
    // console.error('props.labels', n)
    draw()
  },
  { immediate: true }
)
watch(
  () => props.data,
  (n) => {
    // console.error('props.data', n)
    draw()
  },
  { immediate: true }
)

onMounted(() => {
  draw()
})
</script>
<style lang="less" scoped>
.top10-echart {
  width: 100%;
  height: 100%;
  position: relative;
  .top10-echart__content {
    width: 100%;
    height: 100%;
  }
  .loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}
</style>
